<template>
	
	
	
	
	<view class="">
		
		
		
		
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="bg-fff mx12 br10" v-for="(item, index) in pageList" :key="index" @tap="pushDetaile(item.id)">
				<view class="dis-flex flex-align-center bb mt10 px10 py10 ">
					<view class="flex c-6a6 fs14">订单编号：{{item.order_id}}</view>
					<view class="right c-common fs14 fw600">{{getStateName(item.status)}}</view>
				</view>
				<view class="px10 dis-flex bb flex-align-center py10" style="height: 200rpx;">
					<u-image :src="item.next? $store.state.host+item.next.goods_thumb:''" width="200" height="200" border-radius="10"></u-image>
					<view class="flex dis-flex-column ml10 flex-between" style="height: 200rpx;">
						<view class="ellipsis-2 fs14 fwb breakall">{{item.next?item.next.goods_name:''}}</view>
						<view class="dis-flex flex-align-center flex-between">
							<view class="fs14 breakall c-red">{{item.next?item.next.score:''}}积分</view>
							<view class="fs14 breakall">×{{item.next?item.next.buy_num:''}}</view>
						</view>
					</view>
				</view>
				<view class="px10 py10">
					<view class="c-333 fw600 fs14 right">合计积分{{item.score_total}}</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				pageList: [],
			}
		},

		onLoad(option) {
			
		},

		methods: {
			
			getStateName(state){
				switch(state){
					case '3':
						return '异常订单'
					break;
					case '2':
						return '驳回'
					break;
					case '-1':
						return '关闭订单'
					break;
					case '0':
						return '未支付'
					break;
					case '1':
						return '已支付'
					break;
					case '2':
						return '已发货'
					break;
					case '3':
						return '已签收'
					break;
					case '4':
						return '退货中'
					break;
					case '5':
						return '已退款'
					break;
				}
			},
			
			pushDetaile(id){
				this.$api.openWindow('/pages/product/orderDetail?id='+id);
			},
			
			downCallback() { 
				setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 1000);
			},
			
			// getBanner(){
			// 	this.$http.post(this.$config.UrlLoad, {
			// 	}, {
			// 		log: true,
			// 		header: {
			// 			'content-type': 'application/json'
			// 		}
			// 	}).then((res) => {
			// 		console.log(res)
			// 	}).catch((err) => {
			// 		this.mescroll.endErr();
			// 	})
			// },

			upCallback(page) {
				this.$http.post(this.$config.UrlMyOrder, {
					page: page.num,
				}, {
					log: true,
					header: {
						'content-type': 'application/json'
					}
				}).then((res) => {
					let datalist = res?.data?.data || []
					if (page.num == 1) this.pageList = [];
					this.pageList.push.apply(this.pageList, datalist);
					this.mescroll.endBySize(datalist.length, res?.data?.total);
				}).catch((err) => {
					this.mescroll.endErr();
				})
				
				
				
				
			},
			
			// 跳转详细
			pushProductDetail(id) {
				this.$api.openWindow(`/pages/product/productDetailed?id=${id}`);
			}
		}
	}
</script>

<style>
	
	/* page{
		background: #fff;
	} */
	
	.top-search-view {
		position: fixed;
		left: 0;
		background-color: #fff;
		height: 75px;
		z-index: 999;
		width: 100%;
	}

	.product-box-shadow {
		box-shadow: -1rpx -1rpx 20rpx 0rpx rgba(6, 0, 1, 0.08);
	}

	.options-item {
		display: inline-block;
		margin: 20rpx;
		padding: .2rem .5rem;
		border-radius: .1rem;
		background-color: #eee;
		color: #565656 !important
	}

	.popup-button-box {
		position: fixed;
		right: 0;
		bottom: 0;
		width: 560rpx;
		background-color: #ffffff;
		border-top: 1px solid #eee;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}
	
	.class-item {
		font-size: 30rpx;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
		border: 1rpx solid #ddd;
	}
	.class-activi {
		color: #fff;
		background: linear-gradient(to right,#FF5257,#FC2D38);
	}
</style>
